<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Common Modules Source: map/Geolocation.js</title>

	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">

	<link type="text/css" rel="stylesheet" href="styles/site.simplex.css">

</head>

<body>

<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
	<div class="navbar-header">
		<a class="navbar-brand" href="index.html">Common Modules</a>
		<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
        </button>
	</div>
	<div class="navbar-collapse collapse" id="topNavigation">
		<ul class="nav navbar-nav">
			
			<li class="dropdown">
				<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
				<ul class="dropdown-menu ">
					<li><a href="Base.html">Base</a></li><li><a href="Event.html">Event</a></li><li><a href="Html.html">Html</a></li><li><a href="Internal.html">Internal</a></li><li><a href="ol.Overlay.Popup.html">ol.Overlay.Popup</a></li>
				</ul>
			</li>
			
			<li class="dropdown">
				<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b class="caret"></b></a>
				<ul class="dropdown-menu ">
					<li><a href="global.html#addClass">addClass</a></li><li><a href="global.html#addListener">addListener</a></li><li><a href="global.html#arrayRemove">arrayRemove</a></li><li><a href="global.html#clear">clear</a></li><li><a href="global.html#create">create</a></li><li><a href="global.html#createHidden">createHidden</a></li><li><a href="global.html#empty">empty</a></li><li><a href="global.html#EventType">EventType</a></li><li><a href="global.html#findListener">findListener</a></li><li><a href="global.html#firstUpperToCase">firstUpperToCase</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getChildByTagName">getChildByTagName</a></li><li><a href="global.html#getClass">getClass</a></li><li><a href="global.html#getDomEventKey">getDomEventKey</a></li><li><a href="global.html#getElementsByClassName">getElementsByClassName</a></li><li><a href="global.html#getListeners">getListeners</a></li><li><a href="global.html#getrandom">getrandom</a></li><li><a href="global.html#getStyle">getStyle</a></li><li><a href="global.html#getuuid">getuuid</a></li><li><a href="global.html#hasClass">hasClass</a></li><li><a href="global.html#isObject">isObject</a></li><li><a href="global.html#isString">isString</a></li><li><a href="global.html#layerConfigDefautls">layerConfigDefautls</a></li><li><a href="global.html#listen">listen</a></li><li><a href="global.html#listenOnce">listenOnce</a></li><li><a href="global.html#logo">logo</a></li><li><a href="global.html#OL_Style_Type">OL_Style_Type</a></li><li><a href="global.html#remove">remove</a></li><li><a href="global.html#removeClass">removeClass</a></li><li><a href="global.html#removeListener">removeListener</a></li><li><a href="global.html#removeListeners">removeListeners</a></li><li><a href="global.html#setClass">setClass</a></li><li><a href="global.html#splitWords">splitWords</a></li><li><a href="global.html#stamp">stamp</a></li><li><a href="global.html#toBack">toBack</a></li><li><a href="global.html#toFront">toFront</a></li><li><a href="global.html#trim">trim</a></li><li><a href="global.html#unListen">unListen</a></li><li><a href="global.html#unlistenAll">unlistenAll</a></li><li><a href="global.html#unListenByKey">unListenByKey</a></li><li><a href="global.html#upperFirstChart">upperFirstChart</a></li>
				</ul>
			</li>
			
		</ul>
        
            <div class="col-sm-3 col-md-3">
                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
                        <div class="input-group-btn">
                            <button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        
	</div>

</div>
</div>


<div class="container" id="toc-content">
<div class="row">

	
	<div class="col-md-12">
	
		<div id="main">
			

		<h1 class="page-title">Source: map/Geolocation.js</h1>
    
<section>
    <article>
        <pre
            class="sunlight-highlight-javascript linenums">import { ol } from '../constants'


export class Geolocation {


    constructor (map,  deviceid) {
		let  previousM = 0;
		let  deltaMean = 500; //地理位置变化采样周期（ms）
		let  prePosition = null;
		let positions = null;
		let	geolocation =null;
		let ekey = null; //绑定postcompose事件返回值
		let timeoutid = null; //定时器编号
		let ispause = false; //是否暂停的标志
		let oddcoords = null; //暂停后剩下的轨迹点
		let isnew = true; //是否新轨迹

		this.previousM = 0;
		this.map = map;
		this._map = map;
		this.deviceid = '123';
		this.crtInfoDiv(map);
		this.crtMarkerImage(map);
		this.init(this.deviceid);
		this.crtPathLayer();
	}

	//创建用于显示定位点信息的div
	crtInfoDiv (map){
		var info = document.createElement('div');
		info.id = 'info_'+this.map.name;
		info.style.display = 'none';
		info.style.cssText = 'float:right; position:absolute; width:200px; height:120px; top:110px; right:5px; background-color:#4c4e5a; z-index:2000; ' +
        					 'border-width: 10px; border-radius: 10px; border-color: #000 #000 #000 #000; padding:10px; ' +
        					 'font-size:14px; font-family:"微软雅黑"; color:#ffffff;';
		var mdom = map.map.a;
		mdom.children[0].insertBefore(info, mdom.children[0].firstChild);
		//document.body.appendChild(info);
	}

	//创建Overlay容器
	crtMarkerImage (map){
		var img = document.createElement('img');
		img.id = 'marker_'+this.map.name;
		img.src = './image/geolocation_marker.png';
		//img.style.cssText = 'z-index:2001;';
		var mdom = map.map.a;
		mdom.children[0].insertBefore(img, mdom.children[0].firstChild);
		//document.body.appendChild(img);
	}

	init (id){
		// 创建导航定位标识的标注，添加到地图中
	    this.markerEl = document.getElementById('marker_'+this.map.name);
	    this.marker = new ol.Overlay({
	      positioning: 'center-center',
	      element: this.markerEl,
	      stopEvent: false
	    });
	    this._map.addOverlay(this.marker);

	    // 定义用LineString存储轨迹点的地理位置信息（XYZM，Z维度用来存储角度/M则为时间维度）
	    this.positions = new ol.geom.LineString([],
	        /** @type {ol.geom.GeometryLayout} */ ('XYZM'));

	    // 地理定位控件
	    this.geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
	      projection: this._map.getView().getProjection(),
	      trackingOptions: {
	        maximumAge: 10000,
	        enableHighAccuracy: true,
	        timeout: 600000
	      }
	    }));

	    //设置位置定位设备id
	    this.geolocation.id = id;

	    var _self=this;

	    // 定位位置变化监听事件（添加定位点并更新轨迹面板信息）
	    this.geolocation.on('change', function() {
	      var position = _self.geolocation.getPosition();
	      var accuracy = _self.geolocation.getAccuracy();
	      var heading = _self.geolocation.getHeading() || 0;
	      var speed = _self.geolocation.getSpeed() || 0;
	      var m = Date.now();

	      _self.addPosition(position, heading, m, speed); //添加定位点

	      var coords = _self.positions.getCoordinates();
	      var len = coords.length;
	      if (len >= 2) {
	    	  _self.deltaMean = (coords[len - 1][3] - coords[0][3]) / (len - 1);
	      }

	      var html = [
	        'Position: ' + position[0].toFixed(2) + ', ' + position[1].toFixed(2),
	        'Accuracy: ' + accuracy,
	        'Heading: ' + Math.round(_self.radToDeg(heading)) + '&amp;deg;',
	        'Speed: ' + (speed * 3.6).toFixed(1) + ' km/h',
	        'Delta: ' + Math.round(_self.deltaMean) + 'ms'
	      ].join('&lt;br />');
	      document.getElementById('info_'+_self.map.name).innerHTML = html;
	    });

	    this.geolocation.on('error', function() {
	      alert('geolocation error');
	      // FIXME we should remove the coordinates in positions
	    });

	    /*this._map.beforeRender(function (map, frameState) {
            if (frameState !== null) {
                // 利用地理位置变化采样周期平稳变换过渡
                var m = frameState.time - _self.deltaMean * 1.5;
                m = Math.max(m, _self.previousM);
                _self.previousM = m;
                // 沿模拟轨迹设置当前定位点的position
                var c = _self.positions.getCoordinateAtM(m, true);
                var view = frameState.viewState;
                if (c) {
                    view.center = _self.getCenterWithHeading(c, -c[2], view.resolution);//设置地图中心点
                    view.rotation = -c[2];//设置地图旋转角度
                    _self.marker.setPosition(c);//设置导航定位点的标注位置
                }
            }
            return true; // Force animation to continue
        });*/
	}

    // 弧度转角度(°)
    radToDeg (rad) {
      return rad * 360 / (Math.PI * 2);
    }

    // 角度(°)转弧度
    degToRad (deg) {
      return deg * Math.PI * 2 / 360;
    }

    // 负数求模
    mod (n) {
      return ((n % (2 * Math.PI)) + (2 * Math.PI)) % (2 * Math.PI);
    }

    addPosition (position, heading, m, speed) {
      var x = position[0];
      var y = position[1];
      var fCoords = this.positions.getCoordinates();
      var previous = fCoords[fCoords.length - 1];
      var prevHeading = previous &amp;&amp; previous[2];
      if (prevHeading) {
        var headingDiff = heading - this.mod(prevHeading);

        // 强制变换角度（旋转角度变化不超过180度）
        if (Math.abs(headingDiff) > Math.PI) {
          var sign = (headingDiff >= 0) ? 1 : -1;
          headingDiff = -sign * (2 * Math.PI - Math.abs(headingDiff));
        }
        heading = prevHeading + headingDiff;
      }
      this.positions.appendCoordinate([x, y, heading, m]);

      // 只保留20个最后的坐标
      this.positions.setCoordinates(this.positions.getCoordinates().slice(-20));

      // FIXME use speed instead
      if (heading &amp;&amp; speed) {
        //this.markerEl.src = 'js/app/frmwk/gis/images/geolocation_marker_heading.png';
    	  this.markerEl.src = './image/geolocation_marker.png';
      } else {
        this.markerEl.src = './image/geolocation_marker.png';
      }
    }

    // 重新计算得到地图中心点（ by putting the given coordinates at 3/4 from the top or  the screen）
    getCenterWithHeading (position, rotation, resolution) {
      var size = this._map.getSize();
      var height = size[1];

      return [
        position[0] - Math.sin(rotation) * height * resolution * 1 / 4,
        position[1] + Math.cos(rotation) * height * resolution * 1 / 4
      ];
    }

    //var previousM = 0;
    updateView (me){
      // 利用地理位置变化采样周期平稳变换过渡
      var m = Date.now() - me.deltaMean * 1.5;
      m = Math.max(m, me.previousM);
      me.previousM = m;
      // 沿模拟轨迹设置当前定位点的position
      var c = me.positions.getCoordinateAtM(m, true);
      if (c) {
    	var view = this._map.getView();
        view.setCenter(_self.getCenterWithHeading(c, -c[2], view.getResolution()));
        view.setRotation(-c[2]);
        this.marker.setPosition(c);
      }
    }

    // 地图的postcompose 事件回调函数
    render  () {
        this.map.render();//渲染地图
    }

    /**
     * 创建轨迹图层
     */
    crtPathLayer (){
    	this.trackSource = new ol.source.Vector();
        var trackVector = new ol.layer.Vector({
        	source: this.trackSource,
        	style: new ol.style.Style({
        		stroke: new ol.style.Stroke({
        			color: 'red',
        			lineDash: [1, 3, 5, 7],
        			width: 2
        		})
        	}),
        	// map: this._map
        });
        this._map.addLayer(trackVector);
    }


    //两点连线
    drawPath (first, second){
    	if(first != null){
    		var _first = [first[0], first[1]]/*[first.coords.longitude, first.coords.latitude]*/;
        	//var projectedFirst = ol.proj.transform(_first, 'EPSG:4326', 'EPSG:3857');
        	var _second = [second[0], second[1]]/*[second.coords.longitude, second.coords.latitude]*/;
        	//var projectedPosition = ol.proj.transform(_second, 'EPSG:4326', 'EPSG:3857');
            //显示轨迹
            var feature = new ol.Feature({
            	geometry: new ol.geom.LineString([_first, _second])
            });
            this.trackSource.addFeature(feature);
            this.trackSource.refresh();
    	}
	}
	soundMsg(){
	    //判断是否是ie
		var item = {};
        if (!!window.ActiveXObject || "ActiveXObject" in window){
        	item = {html:'&lt;BGSOUND id=1 balance=0 src="resources/message.wav" loop="1">'};
         }else{
        	 item = {html:'&lt;audio id=1 balance=0 src="resources/message.wav" autoplay="autoplay">'};
         }
        // var audio = Ext.widget({
        // 	xtype:'container',  floating: true,shadow:false,border:false,layout:'fit',
        // 	x:(-45),y:(-70),width:25,height:25,cls:'no-border',
        // 	items:[item]
        // });
        // audio.show();
	}
	/**
	 * 预览轨迹
	 * 参数：points : 坐标串，格式[[x, y],... ]
	 */
	previewTrack (_pre){
	    var points = _pre.points,rep = _pre.rep,appmap = _APP.viewport.down('kmap[name=sy_map]');
		this.trackSource.clear();
		if(points.length &lt; 2)
			return;
		var first = points[0];
		for(var i=1; i&lt;points.length; i++){
			var second = points[i];
			this.drawPath(first, second);
			first = second;
		}
		for(var j = 0; j &lt;rep.length; j++){
		    var point=[],div_infowin='div_page_map'+rep[j].event_code;
		    point.push(rep[j].longitude);
		    point.push(rep[j].latitude);
		    point.div_infowin = div_infowin;
		    appmap.showOverlay(point,200,250);
		    // Ext.create('KPSFT.wsrc.controller.common.controller.ChartContainer',{
    		// 	width:200,height:250,floating:true,div_infowin:div_infowin,param:rep[j],name:rep[j].event_code,
    		// 	clazz:'KPSFT.wsrc.controller.largeScreen.chart.EventInfo',
    		// });
		}
		this._map.getView().fit(this.trackSource.getExtent(), this._map.getSize());
		document.getElementById('info_'+this.map.name).style.display="none";
	}


    /**
     * 播放历史轨迹
     * 参数： {positions} json 字符串，结构如下：
     *   [{
	 *	    "coords": {
	 *	      "speed": 1.7330950498580933,
	 *	      "accuracy": 5,
	 *        "altitudeAccuracy": 8,
	 *	      "altitude": 238,
	 *	      "longitude": 5.868668798362713,
	 *	      "heading": 67.5,
	 *	      "latitude": 45.64444874417562
	 *	   },
     *		"timestamp": 1394788266115
     *	  }
	 *	   ...
	 *	 ],
	 *	{isNew} boolean  是否新的轨迹
     */
    showTracking (_show, _new){
    	document.getElementById('info_'+this.map.name).style.display="none";
    	var _self = this;
    	if(!_show) return;
    	var positions_ = _show.tra_data,rep = _show.rep, appmap = this.map;//appmap = _APP.viewport.down('kmap[name=sy_map]');
    	if(positions_.length == 0)
    		return;
    	_self.isnew = _new;
    	//若为新的轨迹，将前次轨迹播放记录清除
    	if(_self.isnew){
    		_self.trackSource.clear();
    	}
    	_self.prePosition = null;
    	_self.positions = new ol.geom.LineString([], ('XYZM'));
    	_self.clearTimeout(_self.timeoutid); //针对当前轨迹播放未完成，播放新轨迹的案例

    	_self.ispause = false; //每次播放前将暂停标识设置为false

    	_self._map.getView().setZoom(17);
    	_self.geolocation.setTracking(false);

    	var coordinates = positions_;
        var first = coordinates.shift();
        _self.tracking(first, false); //执行模拟位置变换功能
        var old_po;
        for(var j = 0; j &lt;rep.length; j++){
            if(rep[j].longitude == first.coords.longitude &amp;&amp; rep[j].latitude == first.coords.latitude ){
                old_po=rep[j];
        	    var point=[],div_infowin='div_page_map'+new Date().toLocaleString();
        	    point.push(rep[j].longitude);
        	    point.push(rep[j].latitude);
        	    point.div_infowin = div_infowin;
        	    appmap.showOverlay(point,200,250);
        	    _self.soundMsg();
        	    // Ext.create('KPSFT.wsrc.controller.common.controller.ChartContainer',{
        		// 	width:200,height:250,floating:true,div_infowin:div_infowin,param:rep[j],
        		// 	clazz:'KPSFT.wsrc.controller.largeScreen.chart.EventInfo',
        		// });
            }
        }

        /***********************解决中断后再播放连续画轨迹的问题*****************/
        var _first = [first.coords.longitude, first.coords.latitude];
        _self.drawPath(_self.prePosition, _first);
		_self.prePosition = _first;
		/**************************************************************/

        var prevDate = first.timestamp;
        var old_container;
        function geolocate() {
        	_self.oddcoords = coordinates; // 将剩余的轨迹点保存
        	if (_self.ispause) { // 若启动暂停，则退出
        		_self.unEvent(_self.ekey);
				return;
			}
			var position = coordinates.shift();
			if (!position) {
				return;
			}
			var newDate = position.timestamp;
			_self.tracking(position, false); // 执行模拟位置变换功能
			// 创建定时器，每隔一定时间执行定位功能函数
			_self.timeoutid = window.setTimeout(function() {
                for(var j = 0; j &lt;rep.length; j++){
                    if(rep[j].longitude == position.coords.longitude &amp;&amp; rep[j].latitude == position.coords.latitude
                        &amp;&amp; (old_po?(old_po.longitude != rep[j].longitude &amp;&amp; old_po.latitude != rep[j].latitude &amp;&amp; old_po.event_code != rep[j].event_code):true)){
                        old_po=rep[j];
                	    var point=[],div_infowin='div_page_map'+new Date().toLocaleString();
                	    old_container=div_infowin;
                	    point.push(rep[j].longitude);
                	    point.push(rep[j].latitude);
                	    point.div_infowin = div_infowin;
                	    appmap.showOverlay(point,200,250);
                	    _self.soundMsg();
                	    // Ext.create('KPSFT.wsrc.controller.common.controller.ChartContainer',{
                		// 	width:200,height:250,floating:true,div_infowin:div_infowin,param:rep[j],
                		// 	clazz:'KPSFT.wsrc.controller.largeScreen.chart.EventInfo',
                		// });
                    }else if(old_container &amp;&amp; (old_po.longitude!==position.coords.longitude || old_po.latitude!==position.coords.latitude) ){
                        var chartcontainer = document.getElementById(old_container)
                        if(chartcontainer){
                            appmap.showOverlay();
                            old_container=undefined;
                            var blingDiv = document.createElement('div');
    			    		$(blingDiv).data("eventData",old_po);
    			    		$(blingDiv).data("position",[old_po.longitude,old_po.latitude]);
    			        	blingDiv.id = 'blingbling'+old_po.event_code;
    			        	blingDiv.className = 'blingbling';
    			        	blingDiv.innerHTML = '&lt;img class="imgidbling" style="visibility:visible;z-index:99" src="./image/guard.gif" />';

    			        	var blingOverlay = new ol.Overlay({
    			    			  id: 'blingbling'+old_po.event_code,
    			    			  element: blingDiv,
    			    			  position: [old_po.longitude,old_po.latitude],
    			    			  positioning: 'center-center',
    			    			  autoPan: true,
    			    			  autoPanAnimation: {
    			    			    duration: 250   //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度. 单位为毫秒（ms）
    			    			  }
    			    			});
                            appmap.map.addOverlay(blingOverlay);
                            blingDiv.onclick = function(e){
                                var detailWin=_APP.viewport.down('window[name=detailWin]');
                                if (detailWin) {
                                    detailWin.close();
                        	    }
                        	    var type='';
                        	    if(old_po.event_status in [2,3,4]){
                        	        clazz='KPSFT.wsrc.controller.symap.floatWin.detailwin.chart.HSSJ';
                        	    }else if(old_po.event_status==5){
                        	        clazz='KPSFT.wsrc.controller.symap.floatWin.detailwin.chart.BJSJ';
                        	    }
                        	    // detailWin=Ext.create('Ext.window.Window',{
                                //     cls:'cls_hydrWin',bodyBorder : false,name:'detailWin',layout:'fit',constrain:true,closeAction: 'destroy',
                        		// 	width:1200,height:700,
                        		// 	items:[
                        		// 	    Ext.create(clazz,{
                        		// 	        param:{
                        		// 	            attributes: {
                        		// 	                code:old_po.event_code,
                        		// 	                event_idx:old_po.idx
                        		// 	            }
                        		// 	        }
                        		// 	    })
                        		//     ]
                        		// });
                        		// _APP.viewport.down('symap').down('container[name=sy_map]').add(detailWin);
                                // detailWin.show();
                            }
                        }
                    }
                }
				prevDate = newDate;
				geolocate();
			}, 2000 /*(newDate - prevDate) /0.5*/ );

			// 播放结束取消地图一直居中
			if (coordinates.length == 0 &amp;&amp; _self.ekey != null) {
				_self.unEvent(_self.ekey);//_self._map.unByKey(_self.ekey);
			}
        }
        geolocate();

        _self.ekey = _self._map.on('postcompose',/*function () {
            _self._map.render();//渲染地图
        }*/
        function(){
			var m = Date.now() - _self.deltaMean * 1.5;
			m = Math.max(m, _self.previousM);
			_self.previousM = m;
			// 沿着线坐标串插值
			var c = _self.positions.getCoordinateAtM(m, true);// [x, y, z, m]
			if (c) {
				var view = _self._map.getView();
				view.setCenter(_self.getCenterWithHeading(c, -c[2], view.getResolution()));
				// view.setRotation(-c[2]);
				_self.marker.setPosition(c);
				// 绘制轨迹(在此处绘制)
				_self.drawPath(_self.prePosition, c);
				_self.prePosition = c;
			}
        });
        _self._map.render();
    }

    /**
     * 实时定位
     * 参数： {position} json 字符串，结构如下：
	 * 	  {
	 *	    "coords": {
	 *	      "speed": 1.7330950498580933,
	 *	      "accuracy": 5,
	 *        "altitudeAccuracy": 8,
	 *	      "altitude": 238,
	 *	      "longitude": 5.868668798362713,
	 *	      "heading": 67.5,
	 *	      "latitude": 45.64444874417562
	 *	   },
     *		"timestamp": 1394788266115
     *	  }
	 *		{isDrawPath} 是否绘制轨迹标识
     */
    tracking (position, isDrawPath){
      var _self = this;
      var coords = position.coords;
      _self.geolocation.set('accuracy', coords.accuracy);
      _self.geolocation.set('heading', this.degToRad(coords.heading));
      var _position = [coords.longitude, coords.latitude];
      /*var projectedPosition = ol.proj.transform(_position, 'EPSG:4326',
          'EPSG:3857');
      this.geolocation.set('position', projectedPosition);*/
      _self.geolocation.set('position', _position);
      _self.geolocation.set('speed', coords.speed);
      _self.geolocation.changed();

      if(isDrawPath){
    	  /*if(!this.style){
    		  this.style = new ol.style.Style({
    			  stroke: new ol.style.Stroke({
          			color: style.color,
          			lineDash: style.lineDash,
          			width: style.width
          		})
    		  });
    	  }*/

    	  _self.drawPath(this.prePosition, position);
    	  _self.prePosition = position;
    	  //this.trackVector.setStyle(this.style);
      }
    }

    // 开启设备跟踪功能
    setTracking (){
    	var _self = this;
    	_self.geolocation.setTracking(true); // 开始位置跟踪
        //this._map.on('postcompose', this.updateView(this));
    	_self._map.on('postcompose', function(){
    		  var m = Date.now() - _self.deltaMean * 1.5;
    	      m = Math.max(m, _self.previousM);
    	      _self.previousM = m;
    	      // 沿着线坐标串插值
    	      var c = _self.positions.getCoordinateAtM(m, true);
    	      if (c) {
    	    	var view = _self._map.getView();
    	        view.setCenter(_self.getCenterWithHeading(c, -c[2], view.getResolution()));
    	        view.setRotation(-c[2]);
    	        _self.marker.setPosition(c);
    	      }
    	});
    	_self._map.render();
    }

    /**
     * 设置轨迹播放暂停
     */
    setPause (){
    	var _self = this;
    	_self.ispause = true;

    	/*********解决中断后再播放轨迹不连续问题，待更好方法******/
		var point = {
			 "coords": {
				 "speed": 0,
				 "accuracy":0,
				 "altitudeAccuracy":0,
				 "altitude": 0,
				 "longitude": _self.prePosition[0],
				 "heading": _self.prePosition[2],
				 "latitude": _self.prePosition[1]
			 },
			 "timestamp": _self.prePosition[3]
		 };
		_self.oddcoords.splice(0, 0,point);
		/*******************************************/
    	return _self.oddcoords;
    }

    /**
     * 继续播放暂停的轨迹
     */
    cancelPause (coords){
    	this.ispause = false;
    	this.showTracking({tra_data:coords,rep:[]}, false);
    }

    /**
     * 清除轨迹,同时解除地图一直居中事件
     */
    clearPath (){
    	this.clearTimeout(this.timeoutid);
    	this.trackSource.clear();
    	this.unEvent(this.ekey);
    	document.getElementById('info_'+this.map.name).style.display="none";
    	this._map.getView().setZoom(15);
    	this._map.getView().setCenter([120.091, 30.635]);
    }

    /**
     * 根据key解除绑定事件
     */
    unEvent (ekey){
    	if(ekey != null){
    		ol.Observable.unByKey(ekey);
    	}
    }

    /**
     * 清除定时程序
     */
    clearTimeout (id){
    	if(id != null){
    		window.clearTimeout(id);
    	}
    }

}

export default Geolocation</pre>
    </article>
</section>





		</div>
	</div>

	<div class="clearfix"></div>

	

</div>
</div>


    <div class="modal fade" id="searchResults">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Search results</h4>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div>


<footer>


	<span class="copyright">
	https://lzw.me.
	</span>

<span class="jsdoc-message">
	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
	
		on Sun Aug 12th 2018
	
	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>

<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>

    <script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>


<script>
$( function () {
	$( "[id*='$']" ).each( function () {
		var $this = $( this );

		$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
	} );

	$( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () {
		var $this = $( this );

		var example = $this.find( "code" );
		exampleText = example.html();
		var lang = /{@lang (.*?)}/.exec( exampleText );
		if ( lang && lang[1] ) {
			exampleText = exampleText.replace( lang[0], "" );
			example.html( exampleText );
			lang = lang[1];
		} else {
			var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
			lang = langClassMatch ? langClassMatch[1] : "javascript";
		}

		if ( lang ) {

			$this
			.addClass( "sunlight-highlight-" + lang )
			.addClass( "linenums" )
			.html( example.html() );

		}
	} );

	Sunlight.highlightAll( {
		lineNumbers : true,
		showMenu : true,
		enableDoclinks : true
	} );

	$.catchAnchorLinks( {
        navbarOffset: 10
	} );
	$( "#toc" ).toc( {
		anchorName  : function ( i, heading, prefix ) {
			return $( heading ).attr( "id" ) || ( prefix + i );
		},
		selectors   : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
		showAndHide : false,
		smoothScrolling: true
	} );

	$( "#main span[id^='toc']" ).addClass( "toc-shim" );
	$( '.dropdown-toggle' ).dropdown();

    $( "table" ).each( function () {
      var $this = $( this );
      $this.addClass('table');
    } );

} );
</script>



<!--Navigation and Symbol Display-->


<!--Google Analytics-->



    <script type="text/javascript">
        $(document).ready(function() {
            SearcherDisplay.init();
        });
    </script>


</body>
</html>
